<template>
    <div>
        <tinymce-editor v-model="content" editorId="editor"></tinymce-editor>
        <div class="area">
        <el-select v-model="province.value" placeholder="" @change="selectProvince">
            <el-option v-for="(item,index) in data"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="city.value" placeholder="" @change="selectCity">
            <el-option v-for="(item,index) in data[curPro].children"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="district.value" placeholder="" @change="selectDistrict">
            <el-option v-for="(item,index) in data[curPro].children[curCity].children"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>       
    </div>
    </div>
</template>

<script>
    import TinymceEditor from '@/components/TinymceEditor.vue'
    import {cityData} from './city.js'
    export default {
       components: {
           TinymceEditor,
       }, 
       data() {
            return {
                content: '',
                data:cityData,
                curPro:0,
                curCity:0,
                curDis:0
            }
        },
        computed: {
            province() {
                return this.data[this.curPro] 
            },
            city() {
                return this.data[this.curPro].children[this.curCity]
            },
            district() {
                return this.data[this.curPro].children[this.curCity].children[this.curDis]
            }
        },
        created() {
            let user = "Join"
            console.log(greeter(user))
        },
        methods: {
            selectProvince(e) {
                this.data.map((item,index) => {
                    item.value==e ? this.curPro = index : ''
                })
                this.update()
            },
            selectCity(e) {
                this.data[this.curPro].children.map((item,index) => {
                    item.value === e ? this.curCity = index : ''
                })
                 this.update()
            },
            selectDistrict(e) {
                this.data[this.curPro].children[this.curCity].children.map((item,index) => {
                    item.value === e ? this.curDis = index : ''
                })
                this.update()
            },
            update(){
                let {province,city,district} = this
                let ret = {
                    value:[province.value,city.value,district.value],
                    val:{
                       province:province,
                       city:city,
                       district:district
                    }
                }
                this.$emit('select',ret)     
            }
        },
    }
</script>

<style lang="scss" scoped>
    .area{
        display: flex;
        align-items: center;
    }
</style>